<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>LiteFlow EL表达式构建器</title>
    <style>
        body {
            font-family: 'Microsoft YaHei', Arial, sans-serif;
            margin: 0;
            padding: 20px;
            background-color: #f5f5f5;
        }
        .container {
            max-width: 1200px;
            margin: 0 auto;
            background: white;
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
        }
        h1 {
            color: #333;
            text-align: center;
            margin-bottom: 30px;
        }
        .form-group {
            margin-bottom: 20px;
        }
        label {
            display: block;
            margin-bottom: 5px;
            font-weight: bold;
            color: #555;
        }
        input, select, textarea {
            width: 100%;
            padding: 10px;
            border: 1px solid #ddd;
            border-radius: 4px;
            font-size: 14px;
            box-sizing: border-box;
        }
        textarea {
            height: 120px;
            font-family: 'Courier New', monospace;
        }
        button {
            background-color: #007bff;
            color: white;
            padding: 12px 24px;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            font-size: 16px;
            margin-right: 10px;
        }
        button:hover {
            background-color: #0056b3;
        }
        .result {
            margin-top: 20px;
            padding: 15px;
            border-radius: 4px;
            background-color: #f8f9fa;
            border: 1px solid #dee2e6;
        }
        .success {
            background-color: #d4edda;
            border-color: #c3e6cb;
            color: #155724;
        }
        .error {
            background-color: #f8d7da;
            border-color: #f5c6cb;
            color: #721c24;
        }
        .example-btn {
            background-color: #28a745;
            margin-bottom: 10px;
        }
        .example-btn:hover {
            background-color: #218838;
        }
        .examples {
            margin-top: 30px;
            padding: 20px;
            background-color: #f8f9fa;
            border-radius: 4px;
        }
        .example-item {
            margin-bottom: 15px;
            padding: 10px;
            background-color: white;
            border-radius: 4px;
            border-left: 4px solid #007bff;
        }
        .example-title {
            font-weight: bold;
            color: #007bff;
            margin-bottom: 5px;
        }
        .example-desc {
            color: #666;
            font-size: 14px;
            margin-bottom: 10px;
        }
        .example-json {
            background-color: #f1f3f4;
            padding: 10px;
            border-radius: 4px;
            font-family: 'Courier New', monospace;
            font-size: 12px;
            overflow-x: auto;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>LiteFlow EL表达式构建器</h1>
        
        <div class="form-group">
            <label for="expressionType">表达式类型：</label>
            <select id="expressionType">
                <option value="THEN">THEN - 串行编排</option>
                <option value="WHEN">WHEN - 并行编排</option>
                <option value="SWITCH">SWITCH - 选择编排</option>
                <option value="IF">IF - 条件编排</option>
                <option value="FOR">FOR - 循环编排</option>
                <option value="WHILE">WHILE - 循环编排</option>
                <option value="ITERATOR">ITERATOR - 迭代循环</option>
                <option value="CATCH_EXCEPTION">CATCH_EXCEPTION - 异常捕获</option>
                <option value="AND">AND - 与表达式</option>
                <option value="OR">OR - 或表达式</option>
                <option value="NOT">NOT - 非表达式</option>
            </select>
        </div>

        <div class="form-group">
            <label for="nodes">节点列表（用逗号分隔）：</label>
            <input type="text" id="nodes" placeholder="例如：a,b,c">
        </div>

        <div class="form-group">
            <label for="condition">条件表达式：</label>
            <input type="text" id="condition" placeholder="用于SWITCH、IF、FOR、WHILE等">
        </div>

        <div class="form-group">
            <label for="defaultOpt">默认选项：</label>
            <input type="text" id="defaultOpt" placeholder="用于SWITCH表达式">
        </div>

        <div class="form-group">
            <label for="tag">标签：</label>
            <input type="text" id="tag" placeholder="可选">
        </div>

        <div class="form-group">
            <label for="id">ID：</label>
            <input type="text" id="id" placeholder="可选">
        </div>

        <div class="form-group">
            <label for="maxWaitSeconds">最大等待时间（秒）：</label>
            <input type="number" id="maxWaitSeconds" placeholder="可选">
        </div>

        <div class="form-group">
            <label for="data">数据绑定（JSON格式）：</label>
            <textarea id="data" placeholder='{"key1": "value1", "key2": "value2"}'></textarea>
        </div>

        <div class="form-group">
            <label for="parallel">并行执行：</label>
            <select id="parallel">
                <option value="">默认</option>
                <option value="true">是</option>
                <option value="false">否</option>
            </select>
        </div>

        <div class="form-group">
            <label for="ignoreError">忽略错误：</label>
            <select id="ignoreError">
                <option value="">默认</option>
                <option value="true">是</option>
                <option value="false">否</option>
            </select>
        </div>

        <div class="form-group">
            <label for="any">任意一个成功即可：</label>
            <select id="any">
                <option value="">默认</option>
                <option value="true">是</option>
                <option value="false">否</option>
            </select>
        </div>

        <div class="form-group">
            <label for="customThreadExecutor">自定义线程执行器：</label>
            <input type="text" id="customThreadExecutor" placeholder="可选">
        </div>

        <div class="form-group">
            <label for="must">必须执行：</label>
            <select id="must">
                <option value="">默认</option>
                <option value="true">是</option>
                <option value="false">否</option>
            </select>
        </div>

        <div class="form-group">
            <label for="pre">前置组件：</label>
            <input type="text" id="pre" placeholder="用于THEN表达式">
        </div>

        <div class="form-group">
            <label for="finally_">后置组件：</label>
            <input type="text" id="finally_" placeholder="用于THEN表达式">
        </div>

        <button onclick="buildExpression()">构建EL表达式</button>
        <button onclick="clearForm()">清空表单</button>
        <button onclick="testHealth()">测试服务健康状态</button>

        <div id="result" class="result" style="display: none;"></div>

        <div class="examples">
            <h3>使用示例</h3>
            
            <div class="example-item">
                <div class="example-title">1. 简单串行执行</div>
                <div class="example-desc">生成：THEN(a,b,c)</div>
                <div class="example-json">{"type": "THEN", "nodes": ["a", "b", "c"]}</div>
                <button class="example-btn" onclick="loadExample('simple')">加载此示例</button>
            </div>

            <div class="example-item">
                <div class="example-title">2. 并行执行</div>
                <div class="example-desc">生成：WHEN(a,b,c).parallel().any(true)</div>
                <div class="example-json">{"type": "WHEN", "nodes": ["a", "b", "c"], "parallel": true, "any": true}</div>
                <button class="example-btn" onclick="loadExample('parallel')">加载此示例</button>
            </div>

            <div class="example-item">
                <div class="example-title">3. 条件判断</div>
                <div class="example-desc">生成：IF(x,THEN(a,b),THEN(c,d))</div>
                <div class="example-json">{"type": "IF", "condition": "x", "children": [{"type": "THEN", "nodes": ["a", "b"]}, {"type": "THEN", "nodes": ["c", "d"]}]}</div>
                <button class="example-btn" onclick="loadExample('conditional')">加载此示例</button>
            </div>

            <div class="example-item">
                <div class="example-title">4. 选择执行</div>
                <div class="example-desc">生成：SWITCH(x).TO(WHEN(a,b),c).defaultOpt(d)</div>
                <div class="example-json">{"type": "SWITCH", "condition": "x", "children": [{"type": "WHEN", "nodes": ["a", "b"]}, {"type": "THEN", "nodes": ["c"]}], "defaultOpt": "d"}</div>
                <button class="example-btn" onclick="loadExample('switch')">加载此示例</button>
            </div>
        </div>
    </div>

    <script>
        function buildExpression() {
            const request = {
                type: document.getElementById('expressionType').value,
                nodes: document.getElementById('nodes').value ? document.getElementById('nodes').value.split(',').map(s => s.trim()) : null,
                condition: document.getElementById('condition').value || null,
                defaultOpt: document.getElementById('defaultOpt').value || null,
                tag: document.getElementById('tag').value || null,
                id: document.getElementById('id').value || null,
                maxWaitSeconds: document.getElementById('maxWaitSeconds').value ? parseInt(document.getElementById('maxWaitSeconds').value) : null,
                data: document.getElementById('data').value ? JSON.parse(document.getElementById('data').value) : null,
                parallel: document.getElementById('parallel').value ? document.getElementById('parallel').value === 'true' : null,
                ignoreError: document.getElementById('ignoreError').value ? document.getElementById('ignoreError').value === 'true' : null,
                any: document.getElementById('any').value ? document.getElementById('any').value === 'true' : null,
                customThreadExecutor: document.getElementById('customThreadExecutor').value || null,
                must: document.getElementById('must').value ? document.getElementById('must').value === 'true' : null,
                pre: document.getElementById('pre').value || null,
                finally_: document.getElementById('finally_').value || null
            };

            // 移除null值
            Object.keys(request).forEach(key => {
                if (request[key] === null || request[key] === undefined || request[key] === '') {
                    delete request[key];
                }
            });

            fetch('/api/el-builder/build', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                },
                body: JSON.stringify(request)
            })
            .then(response => response.json())
            .then(data => {
                const resultDiv = document.getElementById('result');
                resultDiv.style.display = 'block';
                
                if (data.success) {
                    resultDiv.className = 'result success';
                    resultDiv.innerHTML = `
                        <h4>构建成功！</h4>
                        <p><strong>EL表达式：</strong></p>
                        <pre>${data.elExpression}</pre>
                        <p><strong>格式化表达式：</strong></p>
                        <pre>${data.formattedElExpression}</pre>
                    `;
                } else {
                    resultDiv.className = 'result error';
                    resultDiv.innerHTML = `
                        <h4>构建失败</h4>
                        <p><strong>错误信息：</strong> ${data.error}</p>
                    `;
                }
            })
            .catch(error => {
                const resultDiv = document.getElementById('result');
                resultDiv.style.display = 'block';
                resultDiv.className = 'result error';
                resultDiv.innerHTML = `
                    <h4>请求失败</h4>
                    <p><strong>错误信息：</strong> ${error.message}</p>
                `;
            });
        }

        function clearForm() {
            document.getElementById('expressionType').value = 'THEN';
            document.getElementById('nodes').value = '';
            document.getElementById('condition').value = '';
            document.getElementById('defaultOpt').value = '';
            document.getElementById('tag').value = '';
            document.getElementById('id').value = '';
            document.getElementById('maxWaitSeconds').value = '';
            document.getElementById('data').value = '';
            document.getElementById('parallel').value = '';
            document.getElementById('ignoreError').value = '';
            document.getElementById('any').value = '';
            document.getElementById('customThreadExecutor').value = '';
            document.getElementById('must').value = '';
            document.getElementById('pre').value = '';
            document.getElementById('finally_').value = '';
            document.getElementById('result').style.display = 'none';
        }

        function testHealth() {
            fetch('/api/el-builder/health')
            .then(response => response.text())
            .then(data => {
                alert('服务健康状态：' + data);
            })
            .catch(error => {
                alert('服务健康检查失败：' + error.message);
            });
        }

        function loadExample(type) {
            clearForm();
            
            switch(type) {
                case 'simple':
                    document.getElementById('expressionType').value = 'THEN';
                    document.getElementById('nodes').value = 'a,b,c';
                    break;
                case 'parallel':
                    document.getElementById('expressionType').value = 'WHEN';
                    document.getElementById('nodes').value = 'a,b,c';
                    document.getElementById('parallel').value = 'true';
                    document.getElementById('any').value = 'true';
                    break;
                case 'conditional':
                    document.getElementById('expressionType').value = 'IF';
                    document.getElementById('condition').value = 'x';
                    document.getElementById('data').value = '{"type": "IF", "condition": "x", "children": [{"type": "THEN", "nodes": ["a", "b"]}, {"type": "THEN", "nodes": ["c", "d"]}]}';
                    break;
                case 'switch':
                    document.getElementById('expressionType').value = 'SWITCH';
                    document.getElementById('condition').value = 'x';
                    document.getElementById('defaultOpt').value = 'd';
                    document.getElementById('data').value = '{"type": "SWITCH", "condition": "x", "children": [{"type": "WHEN", "nodes": ["a", "b"]}, {"type": "THEN", "nodes": ["c"]}], "defaultOpt": "d"}';
                    break;
            }
        }
    </script>
</body>
</html>
